import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const GradeComparison = () => {
  const [data, setData] = useState([
    {
      clasName: '班级1',
      type: '优秀.',
      value: 18.9,
    },
    {
      clasName: '班级1',
      type: '良好.',
      value: 28.8,
    },

    {
      clasName: '班级2',
      type: '优秀.',
      value: 12.4,
    },
    {
      clasName: '班级2',
      type: '良好.',
      value: 23.2,
    },
    {
      clasName: '班级3',
      type: '优秀.',
      value: 12.4,
    },
    {
      clasName: '班级3',
      type: '良好.',
      value: 23.2,
    },
    {
      clasName: '班级4',
      type: '优秀.',
      value: 19.9,
    },
    {
      clasName: '班级4',
      type: '良好.',
      value: 18.8,
    },

    {
      clasName: '班级5',
      type: '优秀.',
      value: 10.4,
    },
    {
      clasName: '班级5',
      type: '良好.',
      value: 26.2,
    },
    {
      clasName: '班级6',
      type: '优秀.',
      value: 17.4,
    },
    {
      clasName: '班级6',
      type: '良好.',
      value: 23.2,
    },
    {
      clasName: '班级7',
      type: '优秀.',
      value: 15.9,
    },
    {
      clasName: '班级7',
      type: '良好.',
      value: 21.8,
    },

    {
      clasName: '班级8',
      type: '优秀.',
      value: 18.4,
    },
    {
      clasName: '班级8',
      type: '良好.',
      value: 23.2,
    },
    {
      clasName: '班级9',
      type: '优秀.',
      value: 22.4,
    },
    {
      clasName: '班级9',
      type: '良好.',
      value: 13.2,
    },
  ]);

  useEffect(() => {}, []);

  const config = {
    data,
    isStack: true,
    xField: 'clasName',
    yField: 'value',
    seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
    },
    interactions: [
      {
        type: 'active-region',
        enable: false,
      },
    ],
    connectedArea: {
      style: (oldStyle, element) => {
        return {
          fill: 'rgba(0,0,0,0.25)',
          stroke: oldStyle.fill,
          lineWidth: 0.5,
        };
      },
    },
  };

  return <Column {...config} />;
};

export default GradeComparison;
